{% extends '/layout.html' %}

{% block title %}Classmates-{{ current_user.uclass.name }} | 小白鼠{% endblock %}

{% block body %}
	<h2>{{ current_user.uclass.name }}(<span id="nums"></span>)</h2>
	<div id="classmates"></div>
	<img id="change_listen_status" style="width: 45px" src="/static/images/{{ current_user.get_status()['pic'] }}.png">
	<script>
		// 动态获取成员列表并渲染页面
		function render_classmates() {
			$.getJSON('{{ url_for("users.classmates", class_id=current_user.uclass.id) }}', (data) => {
				// 清空classmates下的所有节点
				$('#classmates').empty();
				$('#nums').text(data.length + '');

				for (var i=0; i < data.length; i += 1) {
					item = data[i];
					var id = item['id'];
					var fullname = item['fullname'];
					var color = item['color'];
					var div_str = '<div id=user'+id+' style="float: left;width: 60px;height: 30px;text-align: center;background-color:' + color +';margin: 5px;border-radius: 5px;color: white">' + fullname + '</div>';
					$('#classmates').append($(div_str));
				}
			});
		}

		$(function() {

			// 渲染成员列表
			render_classmates();
			// 添加按钮点击事件
			$('#change_listen_status').click(() => {
				$.get('{{ url_for("users.get_info", current_id=current_user.id) }}', (data) => {
					var status = data;
					$('#change_listen_status').attr('src', '/static/images/'+status+'.png');
					status = status=='go'?'stop':'go';
					var json_data = { 'listen_status': status };
					$.post('{{ url_for("users.change_listen_status") }}',
					JSON.stringify(json_data), (data) => {
						var user_id = '#'+'user'+data['user_id'];
						var color = data['color'];
						$(user_id).css('background-color', color);
					});
				});
			});
			// 定时刷新成员页面
			setInterval(render_classmates, 1000);
		});
	</script>
{% endblock %}
